<template>
  <div class="guide-wrapper">
    <router-link to="/inherentRisk" class="item">
      <i class="iconfont">&#xe7ce;</i>
      <span>固有风险</span>
    </router-link>
    <router-link to="" class="item">
      <i class="iconfont">&#xe62d;</i>
      <span>措施有效性评价</span>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "Guide",
  mounted() {
    console.log(this.$route);
  }
}
</script>

<style lang="scss" scoped>
  .guide-wrapper{
    display: flex;
    width: 1000px;
    height: calc(100% - 120px);
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    .item{
      padding: 15px;
      border: 1px solid #3a8ee6;
      border-radius: 10px;
      box-shadow: 0 0 15px #3a8ee6 inset;
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: all .3s;
      text-decoration: none;
      &:hover{
        transform: scale(1.1);
        background-color:#062a50;
      }
      &:hover .iconfont,&:hover span{
        color: #3ad2e6;
        font-weight: 700;
      }
      &:nth-child(1){
        margin-right: 30px;
      }
      .iconfont{
        font-size: 120px;
        color: #3a8ee6;
        padding: 30px;
        user-select: none;
        transition:all .3s;
      }
      span{
        color: #3a8ee6;
        font-size: 24px;
        letter-spacing: 3px;
        padding-bottom: 30px;
        transition:all .3s;
      }
    }
  }
</style>